<template>
  <div>
  <hr>
  <h4><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>&nbsp;&nbsp;热门博客</h4>
  <!--热门博客start-->
  <div class="hot_blog">
    <div class="row">
      <!--blog分类列表   style="background-color: blue"-->
      <div class="col-md-3 col">
        <div class="list-group">
          <a href="#" class="list-group-item active">博客分类</a>
          <a href="#" class="list-group-item" v-for="n in 4">服务端开发/管理 {{n}}</a>
        </div>
      </div>
      <div class="col-md-9 ">
        <div class="panel panel-default" v-for="n in 4">
          <div class="panel-body">
            <div class="media">
              <div class="col-md-5 col-sm-12">
                <p><img class="img-circle blog_user_headpic" src="static/pic/carousel/3_tou.jpg">&nbsp;阳光很刺眼</p>
                <div class="media-left">
                  <a href="#">
                    <img class="media-object blog_image" src="static/pic/carousel/4.jpg" alt="...">
                  </a>
                </div>
              </div>
              <div class="col-md-7 col-sm-12">
                <p class="blog_font_color">
                  <span class="glyphicon glyphicon-comment" style="float: right;">（2）</span>
                  <span class="glyphicon glyphicon-eye-open" style="float: right;margin-right: 20px;">（321）</span>&nbsp;
                  <span class="glyphicon glyphicon-time" style="float: right;margin-right: 20px;">20117/03/21</span>&nbsp;
                </p>
                <div class="media-body">
                  <h4  class="blog_title">2016年iOS公开可利用漏洞总结</h4>
                  <span class="message_digest hidden-sm hidden-xs">    0x00 序 iOS的安全性远比大家的想象中脆弱，除了没有公开的漏洞以外，还有很多已经公开并且可被利用的漏洞，本报告总结了2016年比较严重的iOS漏洞（可用于远程代码执行或越狱），希望能够对大家移动安全方面</span>
                  <!--<h4 class="media-heading text-right">查看全部&nbsp;<span class="glyphicon glyphicon-triangle-right"></span></h4>-->
                  <button type="button" class="btn btn-block">查看全部</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--热门博客end  #808080;-->
  </div>
</template>

<script>
  export default {
    name: 'blogList',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>
<style scoped>

  .one_class {
    width: 100%;
  }

  .one_class_pic {
    height: 160px;
  }

  .blog_image {
    width: 320px;
    height: 150px;
  }

  .blog_user_headpic {
    height: 30px;
    width: 30px;

  }

  .message_digest {
    color: #808080;
  }

  .blog_font_color {
    color: #808080;
    margin-top:7px;
  }
  .blog_title{
    margin-bottom: 7px;
  }
</style>

